<template>
  <div>
<!--    <h3>上传附件</h3>-->
    <div class="title-style">上传附件</div>
<!--    <Divider style="margin: 5px;" />-->
    <Form :model="formItem">
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
<!--              <span style="color: red">*</span>-->
              <span>房产类证明（房产证、无房产证的情况说明、入住通知单等）</span>
            </template>
            <Col span="6">
              <Upload action="" :before-upload="beforeUpload">
                <Button :disabled="paramsData.operation === '2'" @click="essentials = '房产证'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button v-if="imgList.length > 0" @click="preview">点击预览</Button>
            </Col>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <Modal v-model="preShow" :closable="false" :styles="{top: '20px'}" width="532">
      <Carousel v-model="picIndex" style="width:500px" dots="outside" trigger="hover">
        <CarouselItem class="centerimg" v-for="(imginfo, index) in pic_urls" :key="index">
          <img :id="printNum(index)" :src="imginfo" class="pre_img_style"/>
        </CarouselItem>
      </Carousel>
      <div slot="footer" style="text-align: center">
        <div>
          <Button type="error" v-if="paramsData.operation !== '2'" @click="deletePic">删除当前照片</Button>
          <Button @click="preShow=false">关闭</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { createUpLoadFiles, getSign } from '@/api/common'
import * as imageConversion from 'image-conversion'
// import { postCN } from '@/api/eventlist'
export default {
  props: {
    paramsData: Object
  },
  data () {
    return {
      picIndex: 0,
      formItem: {},
      upPicData: {
        fileName: '',
        filePath: 'cnc/itemInfo'
      },
      pic_urls: [],
      preShow: false,
      essentials: '',
      imgList: [], // 房产证
      params: {
        // 房产证: ''
      }
    }
  },
  methods: {
    getImgList () {
      console.log('jineu')
    },
    beforeUpload (file) {
      this.createUpload(file, this.imgList)
      console.log(file, 'item')
      // let formdata = new FormData()
      // formdata.append('fileName', file.name)
      // formdata.append('file', file)
    },
    createUpload (file, list) {
      // let formdata = new FormData()
      // formdata.append('fileName', file.name)
      // formdata.append
      console.log(file.size, 'file.size')
      if (file.size / 1024 / 1024 > 1) { // 图片大于1M进行压缩处理
        console.log('限制啊')
        return new Promise(() => {
          imageConversion.compressAccurately(file, 200).then(res => {
            console.log('限制2')
            this.upPicData.fileName = file.name + '.' + file.type.substring(6)
            let that = this
            const reader = new FileReader()
            // reader.readAsDataURL(file)
            reader.readAsDataURL(new File([res], '', { type: res.type, lastModified: Date.now() }))
            reader.onload = () => {
              console.log('限制3')
              let index = reader.result.indexOf('base64,') + 7
              that.upPicData.file = reader.result.substring(index)
              that.upPic(that.upPicData, list)
            }
            return false
          })
        })
      } else {
        this.upPicData.fileName = file.name + '.' + file.type.substring(6)
        let that = this
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          let index = reader.result.indexOf('base64,') + 7
          that.upPicData.file = reader.result.substring(index)
          that.upPic(that.upPicData, list)
        }
        return false
      }
    },
    upPic (obj, list) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: obj.filePath, fileName: obj.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              let imgurl = res.data.data
              list.push(imgurl)
              let imgString = ''
              list.forEach(function (item) {
                if (imgString) {
                  imgString = imgString + ',' + item
                } else {
                  imgString = item
                }
              })
              this.$set(this.params, '房产证', imgString)
            } else {
              this.$Notice.error({ title: '上传失败', desc: '' })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: '' })
        }
      })
    },
    printNum (e) {
      this.printIndex = e
      return e
    },
    deletePic () {
      console.log()
      this.pic_urls.splice(this.picIndex, 1)
      if (this.pic_urls.length === 0) {
        this.imgList = []
        this.preShow = false
        this.params.房产证 = ''
      } else {
        this.imgList = this.pic_urls
        let imgString = ''
        this.imgList.forEach(function (item) {
          if (imgString) {
            imgString = imgString + ',' + item
          } else {
            imgString = item
          }
        })
        this.params.房产证 = imgString
      }
    },
    preview () {
      this.preShow = true
      this.pic_urls = this.imgList
    },
    clear () {
      this.imgList = []
      this.params = {}
    }
  },
  mounted () {
    if (this.paramsData.operation) {
      if (this.paramsData.params) {
        this.params = this.paramsData.params
        if (this.paramsData.params.房产证) {
          this.$nextTick(() => {
            this.imgList = this.paramsData.params.房产证.split(',')
          })
          // this.imgList = this.paramsData.params.房产证.split(',')
          // console.log(this.imgList)
        }
      }
    }
    this.clear()
  }
}
</script>
<style>
.centerimg {
  text-align: center;
}
.pre_img_style {
  height: 500px;
  width: auto;
  max-width: 500px;
}
.title-style {
  padding: 8px 12px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 15px 0;
  font-size: 16px;
  width: 100%;
}
/*.ivu-form-item-label {*/
/*  width: 55%;*/
/*}*/
</style>
